<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html案例</title>

    <style>
        .container {
            display: flex;
            /*flex容器内的元素会平均分布，并在两侧保留相等的空间。*/
            justify-content: space-around;
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main">
        <div class="section">
            <h1>标题1</h1>
            <p>p1</p>
        </div>
        <div class="section">
            <h1>标题2</h1>
            <p>p2</p>
        </div>
        <div class="section">
            <h1>标题3</h1>
            <p>p3</p>
        </div>
        <div class="section">
            <h1>标题4</h1>
            <p>p4</p>
        </div>
        <div class="section">
            <h1>标题5</h1>
            <p>p5</p>
        </div>
        <div class="section">
            <h1>标题6</h1>
            <p>p6</p>
        </div>
        <div class="section">
            <h1>标题7</h1>
            <p>p7</p>
        </div>
        <div class="section">
            <h1>标题8</h1>
            <p>p8</p>
        </div>
        <div class="section">
            <h1>标题9</h1>
            <p>p9</p>
        </div>
        <div class="section">
            <h1>标题10</h1>
            <p>p10</p>
        </div>
    </div>
    <div class="aside">
        <ul>
            <li><a href="http://www.baidu.com/detail1">超级链接1</a></li>
            <li><a href="http://www.baidu.com/detail2">超级链接2</a></li>
            <li><a href="http://www.baidu.com/detail3">超级链接3</a></li>
            <li><a href="http://www.baidu.com/detail4">超级链接4</a></li>
            <li><a href="http://www.baidu.com/detail5">超级链接5</a></li>
            <li><a href="http://www.baidu.com/detail6">超级链接6</a></li>
            <li><a href="http://www.baidu.com/detail7">超级链接7</a></li>
            <li><a href="http://www.baidu.com/detail8">超级链接8</a></li>
            <li><a href="http://www.baidu.com/detail9">超级链接9</a></li>
            <li><a href="http://www.baidu.com/detail10">超级链接10</a></li>
        </ul>
    </div>
</div>
<div class="footer">
    <div class="container">
        我是底部栏
    </div>
</div>
</body>
</html>